<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container" class="active" myattr="myval"><!-- 我是注释 --><p>我是span</p>我是文本</div>
    <script>
        // 节点类型 
        // 获取container里的所有节点
        var containerEle = document.querySelector(".container");
        var eles = containerEle.childNodes;
        console.log(eles);

        // 节点类型 ： nodeType是 1 ：证明这个节点是元素节点 如果是2： 证明是属性节点  3：证明是文本节点 8：是注释节点
        // 每一个节点都会有节点名:nodeName  和节点值:nodeValue
        //1.获取元素节点 ，元素节点的nodeType 1  节点名是大写的标签名 节点值是null
        // var eleNode = eles[1]; 
        // // console.log(eleNode.nodeType);
        // if(eleNode.nodeType==1){
        //     // console.log("是一个元素节点");
        //     console.log(eleNode.nodeName);
        //     console.log(eleNode.nodeValue);

        // }

        // 2.文本节点   节点类型 nodeType ：3   节点名 nodeName ：text  节点值nodeValue： 文本的内容
        // var textNode = eles[2];
        // console.log(textNode.nodeType);
        // console.log(textNode.nodeName);
        // console.log(textNode.nodeValue);

        // 3.注释节点 节点类型 nodeType:8 节点名 nodeName：comment 节点值 nodeValue :注释内容；
        // var commentNode = eles[0];
        // console.log(commentNode.nodeType);
        // console.log(commentNode.nodeName);
        // console.log(commentNode.nodeValue);

        // 4.属性节点 ； nodeType是2   节点名：nodeName是属性名 节点值 nodeValue 是属性值；
        // 获取元素节点的属性
        var attrs =  containerEle.attributes   // 获取元素的所有属性内容；
        //    console.log(attrs);
        var myattr = attrs[1];
        console.log(myattr.nodeType);  // 2
        console.log(myattr.nodeName);  // myattr
        console.log(myattr.nodeValue); //myval
    
    
        // 总结 ： 节点分类 nodeType 
        /* 
                1.元素节点( nodeName ：大写标签名 nodeValue:null ) 
                2.属性节点(nodeName: 属性名 nodeValue：属性值)  
                3.文本节点（nodeName：text nodeValue：文本内容）  
                8 注释节点（nodeName：comment ；nodeVlaue：注释内容）；
        */
      
    </script>
</body>
</html>